<template>
    <div id="safe_audit_show">
        <p>页面数据的百分比:<el-progress :text-inside="true" :stroke-width="24" :percentage="max" status="success"></el-progress></p>
        <!-- 查询条件 -->
        <el-form :inline="true" :model="info" class="demo-form-inline">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="请选择商品I级分类:">
                            <el-select v-model="info.search_firstKindId" placeholder="请选择" clearable>
                                <el-option v-for="x in aa1" :key="x.id" :label="x.kindName"
                                    :value="x.kindId"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="请选择商品II级分类:">
                            <el-select v-model="info.search_secondKindId" placeholder="请选择" clearable>
                                <el-option v-for="x in bb1" :key="x.id" :label="x.kindName"
                                    :value="x.kindId"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="请选择商品III级分类:">
                            <el-select v-model="info.search_thirdKindId" placeholder="请选择" clearable>
                                <el-option v-for="x in cc1" :key="x.id" :label="x.kindName"
                                    :value="x.kindId"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="请选择产品名称:">
                            <el-select v-model="info.search_productName" placeholder="请选择" clearable>
                                <el-option v-for="x in dd1" :key="x.id" :label="x.productName"
                                    :value="x.productName"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="17">
                    <div class="grid-content bg-purple">
                        <el-form-item label="请输入登记时间" required>
                            <el-col :span="11">
                                <el-form-item prop="date1">

                                    <el-date-picker type="datetime" v-model="info.search_registerTime1"
                                        placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="date2">
                                    <el-date-picker type="datetime" v-model="info.search_registerTime2"
                                        placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple-light">
                        <el-form-item>
                            <el-button type="success" @click="search" round>查询按钮</el-button>
                        </el-form-item>

                    </div>
                </el-col>
            </el-row>
        </el-form>




        <!--安全库存数据-->
        <el-table :data="arrList" style="width: 1200px ;text-align:center ">
            <el-table-column prop="storeId" label="配置单编号" width="300">
            </el-table-column>
            <el-table-column prop="productId" label="产品编号" width="300">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" width="300">
            </el-table-column>
            <el-table-column prop="checkTag" label="复核状态" width="300">
                <template slot-scope="scope">
                    {{ scope.row.checkTag == "S001-0" ? "等待" : "完成" }}
                </template>
            </el-table-column>
        </el-table>



        <!---分页组件-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="pageSizeList" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                // search_firstKindId: '',
                // search_secondKindId: '',
                // search_thirdKindId: '',
                // search_productName: '',
                // search_registerTime1: '',
                // search_registerTime2: ''
            },
            // 当前页号
            currentPage: 1,
            // 当前页大小
            pageSize: 2,
            // 总记录数
            total: 0,
            // 页大小列表
            pageSizeList: [2, 5, 10, 20],

            aa1: [],
            bb1: [],
            cc1: [],
            dd1: [],
            arrList: [],
            max:0,
        }
    },
    methods: {
        async list() {
            // 用es6的解构函数
            const { data: res } = await this.$http.post
                (`/StorageCell/showtongguo/${this.currentPage}/${this.pageSize}`, this.info)
            // console.log(res)
            this.arrList = res.rows
            this.total = res.total
            let aaa=this.total/1
          if(aaa=="Infinity"){
           this.max=0
          }else{
            this.max=aaa
          }
        },
        async aa() {
            const { data: res } = await this.$http.post
                (`/DesignConflgFileKind/List?num=1`)
            this.aa1 = res
            const { data: res1 } = await this.$http.post
                (`/DesignConflgFileKind/List?num=2`)
            this.bb1 = res1
            const { data: res2 } = await this.$http.post
                (`/DesignConflgFileKind/List?num=3`)
            this.cc1 = res2
            const { data: res3 } = await this.$http.post
                (`/design/module/commodity`)
            this.dd1 = res3
        },
        // 表单查询
        search() {
            // 查询
            this.currentPage = 1
            this.list()
        },

        // 页大小改变
        handleSizeChange(val) {
            this.pageSize = val
            this.list()
        },
        // 页号改变
        handleCurrentChange(val) {
            this.currentPage = val
            // 重新查询
            this.list()
        },
    },
    created() {
        this.list()
        this.aa()
    }
}
</script>

<style scoped>
/* #safe_audit_show{
    text-align: center;
} */
</style>